<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin:0;padding:0;}
        .all{display:flex;width:1100px;height:730px;border:1px solid #000; justify-content: space-around;box-sizing: border-box;padding-top:100px;}
        .div01{width:250px;height:100%;display:flex; flex-wrap: wrap; }
        .div02{position:relative;width:500px;height:100%; display: flex; justify-items: center;}
        .div020{position:absolute;width:458px;left:5px;top:-53px;height:50px;border:2px solid red; font-size:36px;text-align: center;}
        .div03{width:250px;height:100%;display: flex;flex-wrap: wrap;}
        .div01 div{width:40%;height:100px;border:1px solid #000;margin-left:5px;}
        .div021{width:50%;display:flex;flex-wrap: wrap;}
        .div022{width:50%;display:flex;flex-wrap: wrap;}
        .div021 div{width:40%;height:100px;border:1px solid #000;margin-left:5px;}
        .div022 div{width:40%;height:100px;border:1px solid #000;margin-left:5px;}
        .div03 div{width:40%;height:100px;border:1px solid #000;margin-left:5px;}
        .ip01{width:100%;height:calc(100% - 20px);border:0;font-size:30px;}
        .ip01:focus{background-color: #ccc;}
    </style>
</head>
<body>
    <div class="all">
        <div class="div01">

        </div>
        <div class="div02">
            <div class="div020">
                讲台
            </div>
            <div class="div021"></div>
            <div class="div022"></div>
        </div>
        <div class="div03">

        </div>
    </div>
</body>
</html>
<script>
    let div01 = document.querySelector(".div01");
    let div02 = document.querySelector(".div02");
    let div03 = document.querySelector(".div03");
    let div021 = document.querySelector(".div021")
    let div022 = document.querySelector(".div022")

    let initTd = ()=>{
        let ar = [411,412,421,422,431,432,441,442,451,452,461,462];
        let str = ar.map(item=>`<div>${item}</div>`)
        div01.innerHTML = str.join('')


        ar = [311,312,321,322,331,332,341,342,351,352,361,362];
        str = ar.map(item=>`<div>${item}</div>`)
        div021.innerHTML = str.join('')

        ar = [211,212,221,222,231,232,241,242,251,252,261,262];
        str = ar.map(item=>`<div>${item}</div>`)
        div022.innerHTML = str.join('')

        ar = [111,112,121,122,131,132,141,142,151,152,161,162];
        str = ar.map(item=>`<div>${item}</div>`)
        div03.innerHTML = str.join('')

    }

    let handlerClick = ()=>{
        let a1 = document.querySelectorAll(".div01 div");
        let a2 = document.querySelectorAll(".div021 div");
        let a3 = document.querySelectorAll(".div022 div");
        let a4 = document.querySelectorAll(".div03 div");
        let a5 = [...a1,...a2,...a3,...a4];
        a5.forEach(item=>{
            item.innerHTML+=`
                <input class="ip01" />
            `
        })

        console.log(a5.length);
    }


    window.onload=function(){
        initTd();
        //拿到所有的div，绑定事件
        handlerClick();
    }
</script>